import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,TextInput,Modal,
    Platform
} from 'react-native';
import pxToDp from '../common/comm';
import * as DATA from '../data/data';

export default class PersonalCenter extends Component {
  // 构造
    constructor(props) {
      super(props);
      // 初始状态
      let userInfo = this.props.navigation.state.params.userInfo;
      this.state = {
        loginkey:userInfo.loginkey||null,
        name:'',
        wx:'',
        qq:'',
        isModal: false,
        phone:userInfo.loginname||''
      };

      let _that = this;
      let data2 = 'loginkey='+this.state.loginkey;
      fetch(DATA.USERINFO_URL,{
        method: "POST",
        headers:{'Content-Type': 'application/x-www-form-urlencoded' },
        body: data2
      })
          .then((response) => {       // 数据解析方式
            if (response.ok) {
              return response.json();
            }
          })
          .then((responseData) => {       // 获取到的数据处理
            if(responseData.status == 1){
              this.setState({
                name:responseData.info.nickname,
                phone:responseData.info.loginname,
                wx:responseData.info.wx,
                qq:responseData.info.qq
              })
            }
          })
          .catch((error) => { // 错误处理
            alert('获取数据失败，请重试！');
          })
          .done();
    }

  //提示框3秒后消失
  _show(txt) {
    this.setState({
      isModal: true,
      alertTxt: txt
    });
    this.timer = setTimeout(() => {this._hide()},2000);
  }

  _hide() {
    this.setState({
      isModal:false
    })
  }

  check() {
    let name = this.state.name;
    let wx = this.state.wx;
    let qq = this.state.qq;
    //个人资料
    if (name == '') {
      this._show('请输入姓名!');
      return false;
    }
    reg = /^([\u4e00-\u9fa5]){2,7}$/; //判断姓名格式
    if (!reg.test(name)) {
      this._show('请输入正确姓名!');
      return false;
    }
    if (wx == '' && qq == '') {
      this._show('QQ和微信至少填写一项!');
      return false;
    }
    return true;
  }

  _onPress() {
    let isCheck = this.check();
    if(isCheck){
      let _that = this;
      let data2 = 'nickname='+this.state.name+'&wx='+this.state.wx+'&qq='+this.state.qq+'&loginkey='+this.state.loginkey;
      fetch(DATA.SAVEINFO_URL, {
        method: "POST",
        headers:{'Content-Type': 'application/x-www-form-urlencoded' },
        body: data2
      })
          .then((response) => {       // 数据解析方式
            if (response.ok) {
              return response.json();
            }
          })
          .then((responseData) => {       // 获取到的数据处理
            _that._show(responseData.msg);
            if(responseData.status == 1){

            }
          })
          .catch((error) => { // 错误处理
            _that._show(error);
          })
          .done();
    }

  }

  static navigationOptions={
    headerTintColor:'#fff',
    headerTitle: '个人信息',
    headerStyle: {
      backgroundColor: DATA.BASE_COLOR,
        height:Platform.OS === 'android'?pxToDp(84):pxToDp(110)
    },
    headerTitleStyle: {
      color: '#fff',
      fontSize: pxToDp(34),
    marginLeft:Platform.OS === 'android'?pxToDp(185):null
    },
    gesturesEnabled :true
  }
  render() {
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
        style={styles.contentContainer}
      >
        <Modal
            animationType='fade'            // 淡入淡出
            transparent={true}              // 透明
            visible={this.state.isModal}    // 根据isModal决定是否显示
            onRequestClose={() => {this.onRequestClose()}}  // android必须实现
            >
          <View style={modalStyle.modalViewStyle}>
            <View style={modalStyle.hudViewStyle}>
              <Text style={modalStyle.hudTextStyle}>{this.state.alertTxt}</Text>
            </View>
          </View>
        </Modal>
        <View style={styles.row}>
          <Text style={{color:'red',marginLeft:pxToDp(25)}}>*</Text>
          <Text style={styles.title}>真实姓名：</Text>
          <TextInput
              underlineColorAndroid="transparent"
              style={styles.input}
              onChangeText={(text)=>{this.setState({name:text})}}
              value={this.state.name}
              />
        </View>
        <View style={[styles.row,styles.row1]}>
          <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>手机号码：</Text>
            <Text style={styles.input}>{this.state.phone}</Text>
        </View>
        <View style={[styles.row,styles.row1]}>
          <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>微      信：</Text>
          <TextInput
              underlineColorAndroid="transparent"
              style={[styles.input,{marginLeft:pxToDp(10)}]}
              onChangeText={(text)=>{this.setState({wx:text})}}
              value={this.state.wx}
              />
        </View>
        <View style={[styles.row,styles.row1]}>
          <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>Q       Q：</Text>
          <TextInput
              underlineColorAndroid="transparent"
              keyboardType ='numeric'
              style={[styles.input,{marginLeft:pxToDp(20)}]}
              onChangeText={(text)=>{this.setState({qq:text})}}
              value={this.state.qq}
              />
        </View>
        <Text style={styles.btn} onPress={()=>this._onPress()}>提交</Text>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: pxToDp(10),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: pxToDp(1),
    borderBottomColor: '#ddd',
    height:pxToDp(100)
  },
  row1: {
    paddingLeft: pxToDp(8),
  },
  title: {
    fontWeight: 'bold',
    fontSize:pxToDp(26)
  },
  input: {
    width: pxToDp(450),
    fontSize:pxToDp(26)
  },
  btn:{
    backgroundColor:DATA.BASE_COLOR,
    color:'#fff',
    fontSize:pxToDp(32),
    width:pxToDp(400),
    height:pxToDp(70),
    textAlign:'center',
      textAlignVertical:'center',
      borderRadius:pxToDp(20),
    paddingTop:Platform.OS === 'android'?null:pxToDp(20),
    marginLeft:pxToDp(120),
    marginTop:pxToDp(40),
  }
  });

const modalStyle = StyleSheet.create({
  modalViewStyle: {
    position: 'absolute',
    top:pxToDp(900),
    alignSelf:'center'
  },
  hudViewStyle: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    paddingLeft:pxToDp(15),
    paddingRight:pxToDp(15),
    paddingTop:pxToDp(10),
    paddingBottom: pxToDp(10),
    borderRadius:pxToDp(10)
  },
  hudTextStyle: {
    color:'#fff'
  }
})
